<script setup lang="ts">
import { IOptionItem } from "xcore/cmpnt"
import { defineEmits, ref } from 'vue'
const emit = defineEmits(['change'])

const selected = ref<string>('')

const onclick = (xvalue: any) => {
    selected.value = xvalue
    emit('change', xvalue)
}
</script>
<template>
        <el-select v-model="$attrs['modelValue']" @change="onclick" v-bind="$attrs" :style="$attrs['style']"
            :class="$attrs['class']">
            <el-option v-for="item in ($attrs['options'] as IOptionItem[])" :key="item.value" :label="item.label"
                :value="item.value">
                <div class="d-flex justify-content-center">
                    <el-icon :size="20" class="mt-2">
                        <component :is="item.value" style="font-size:1rem"></component>
                    </el-icon>
                </div>
            </el-option>
            <template #label>
                <div class="d-flex justify-content-center">
                    <el-icon size="small">
                        <component :is="$attrs['modelValue']"></component>
                    </el-icon>
                </div>
            </template>
        </el-select>

</template>
<style scoped>


</style>